const util = require('../../utils/util.js')
const api = require('../../config/api.js')

Page({
  /**
   * 页面的初始数据
   */
  data: {
    cameraCtx: undefined,
    cameraListener: undefined,

    rectangleCanvasWidth: undefined,
    rectangleCanvasHeight: undefined,

    playing: false,
    timer: undefined,
    result: "无法识别"
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    this.data.cameraCtx = wx.createCameraContext()

    const query = wx.createSelectorQuery()
    query.select('#rectangleCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        // console.log(res)
        const width = res[0].width
        const height = res[0].height
        this.setData({rectangleCanvasWidth: width})
        this.setData({rectangleCanvasHeight: height})
        // console.log(width, height)
        const rectangleCanvas = res[0].node
        const rectangleCanvasCtx = rectangleCanvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        rectangleCanvas.width = width * dpr
        rectangleCanvas.height = height * dpr
        rectangleCanvasCtx.scale(dpr, dpr)
        rectangleCanvasCtx.beginPath()
        rectangleCanvasCtx.lineWidth = '4'
        rectangleCanvasCtx.strokeStyle = 'rgba(255, 255, 255, 0.5)'
        rectangleCanvasCtx.rect((width - 350) / 2, 80, 350, 350)
        rectangleCanvasCtx.stroke()
      })

    query.select('#screenShotCanvas')
      .fields({ node: true, size: true })
      .exec((res) => {
        const width = res[1].width
        const height = res[1].height
        // console.log(width, height)
        this.data.screenShotCanvas = res[1].node
        this.data.screenShotCanvasCtx = this.data.screenShotCanvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        this.data.screenShotCanvas.width = width * dpr
        this.data.screenShotCanvas.height = height * dpr
        this.data.screenShotCanvasCtx.scale(dpr, dpr)
      })
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    // console.log(this.data)
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },
  switchPlay: function () {
    // console.log(123)
    if (!this.playing) {
      this.playing = true
      // this.setUpPage()
      this.setData({timer: setInterval(this.faceRecognition, 1000)})
    } else {
      this.playing = false
      clearInterval(this.data.timer)
    }
  },
  hello: function() {
    console.log('Hello')
  },
  faceRecognition: function() {
    this.data.cameraCtx.takePhoto({
      quality: 'high',
      success: (res) => {
        console.log(res.tempImagePath)
        const collectorImage = this.data.screenShotCanvas.createImage()
        collectorImage.onload = () => {
          this.data.screenShotCanvasCtx.drawImage(collectorImage, (this.data.rectangleCanvasWidth - 350) / 2, 80, 350, 350, 0, 0, 350, 350 )
          // this.storePhoto(this.data.screenShotCanvas.toDataURL('image/webp'))
          const data = { 'photo': this.data.screenShotCanvas.toDataURL('image/webp') }
          util.request(api.UserRecognition, data, 'POST', 'application/json;charset=UTF-8').then((res)=> {
            this.setData({result: res.data.name + '-' + res.data.cell_phone_number})
          })
        }
        collectorImage.src = res.tempImagePath
      }
    })
  }
})